<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>3D转换的各种属性</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		perspective: 500px;
	}
	.out,.out2,.out3,.out4{
		width: 300px;
		height: 300px;
		border: 2px solid red;
		margin: 0 auto;

		/*通常在父级设置景深*/
		perspective:500px;

	}
	.out2,.out3{
		transform: rotateY(60deg);
		transform-style: flat;
	}
	.out3{
		transform-style: preserve-3d;
	}
	.out4{
		/*perspective:500px;*/
		perspective-origin: 20px 20px; 

	}
	.inner{
		width: 200px;
		height: 200px;
		margin: 50px 0 0 50px;
		border: 3px solid blue;
		background-color: green;
		/*3D变换*/
		transform: rotateX(40deg);
		transform-origin: center;
	}
</style>
</head>
<body>
    <div class="out"><!---->
    	<div class="inner"></div>
    </div>
    <div class="out2"><!---->
    	<div class="inner"></div>
    </div>
    <p>transform-style:flat，父元素变换后，子元素不跟着变化</p>

    <div class="out3"><!---->
    	<div class="inner"></div>
    </div>
    <p>transform-style:preserve-3d,父元素变换后，子元素也跟着变化</p>

    <br><br><br><br><br><br>

	<div class="out4"><!---->
    	<div class="inner"></div>
    </div>
    <p>perspective-origin: 20px 20px;灭点，即消失点的位置，<strong>一定要与perspective一起用</strong></p>
</body>
</html>